<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <top-bar title="报名列表" bgc="background-color:#F3F3F3"></top-bar>
      <van-dropdown-menu>
        <van-dropdown-item :title="title" @change="changeType" :value="value" :options="option" />
      </van-dropdown-menu>
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell
          v-for="item in appList"
          :key="item._id"
          @click="showDialog(item)"
          :is-link="item.approval"
          :title="item.orgname"
          :value="!item.approval ? '尚未回复' : '已回复，点击查看'"
          :label="item.appcreatedate"
          :border="false"
        />
      </van-list>
    </van-pull-refresh>
    <van-dialog use-slot v-model="show" @close="onClose">
      <van-divider contentPosition="center">通 知</van-divider>
      <van-field type="textarea" v-model="notify"></van-field>
    </van-dialog>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      appForm: {},
      loading: false,
      completed: false,
      isLoading: false,
      finished: false,
      title: "全部组织",
      appList: [],
      option: [],
      value: "",
      show: false,
      notify: ''
    };
  },
  mounted() {
    this.getList();
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      this.$api
        .get("/api/application/list/all", { appnumber: this.userInfo.number })
        .then(res => {
          this.isTypeProcessing(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getList() {
      this.appForm.pageSize = this.pageSize;
      this.appForm.pageNum = this.pageNum;
      this.appForm.appnumber = this.userInfo.number;
      this.$api
        .get("/api/application/list", { params: this.appForm })
        .then(res => {
          this.appList.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    isTypeProcessing(arr) {
      this.option = [];
      let tempArr = [];
      arr.forEach(item => {
        tempArr.push(item.apptype);
      });
      tempArr = [...new Set(tempArr)];
      tempArr.forEach(item => {
        let obj = {};
        obj.text = item;
        obj.value = item;
        this.option.push(obj);
      });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getList();
    },
    // 下拉刷新
    pullDown() {
      this.list = [];
      this.pageNum = 1;
      this.appList = [];
      this.title = "全部组织";
      this.appForm.apptype = "";
      this.completed = false;
      this.isLoading = true;
      this.getList();
    },
    changeType(value) {
      this.title = value;
      this.pageNum = 1;
      this.appForm.apptype = value;
      this.appList = [];
      this.getList();
    },
    showDialog(item) {
      if (item.approval) {
        this.notify = item.notify
        this.show = true;
      }
    },
    onClose() {
      this.show = false;
    }
  }
};
</script>

<style>
</style>